{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "from ipywidgets import Label, VBox, Layout\n",
    "from bqplot.market_map import MarketMap\n",
    "from bqplot import (ColorScale, ColorAxis, DateScale, \n",
    "                    LinearScale, Axis, Lines, Figure)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Get Data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "data = pd.read_csv('../../data_files/country_codes.csv', index_col=[0])\n",
    "country_codes = data.index.values\n",
    "country_names = data['Name']"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Basic Market Map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "market_map = MarketMap(names=country_codes,      \n",
    "                       # basic data which needs to set for each map\n",
    "                       ref_data=data,            \n",
    "                       # Data frame which can be used for different properties of the map\n",
    "                       # Axis and scale for color data\n",
    "                       tooltip_fields=['Name'],\n",
    "                       layout=Layout(width='800px', height='600px'))\n",
    "\n",
    "market_map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "market_map.colors = ['MediumSeaGreen']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "market_map.font_style = {'font-size': '16px', 'fill':'white'}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "market_map.title = 'Country Map'\n",
    "market_map.title_style = {'fill': 'Red'}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## GDP data with grouping by continent\n",
    "\n",
    "World Bank national accounts data, and OECD National Accounts data files. (The World Bank: GDP per capita (current US$))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "gdp_data = pd.read_csv('../../data_files/gdp_per_capita.csv', index_col=[0], parse_dates=True)\n",
    "gdp_data.fillna(method='backfill', inplace=True)\n",
    "gdp_data.fillna(method='ffill', inplace=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "col = ColorScale(scheme='Greens')\n",
    "continents = data['Continent'].values\n",
    "ax_c = ColorAxis(scale=col, label='GDP per Capita', visible=False)\n",
    "\n",
    "data['GDP'] = gdp_data.iloc[-1]\n",
    "\n",
    "market_map = MarketMap(names=country_codes, groups=continents,       # Basic data which needs to set for each map\n",
    "                       cols=25, row_groups=3,                        # Properties for the visualization\n",
    "                       ref_data=data,                                # Data frame used for different properties of the map\n",
    "                       tooltip_fields=['Name', 'Continent', 'GDP'],  # Columns from data frame to be displayed as tooltip\n",
    "                       tooltip_formats=['', '', '.1f'],\n",
    "                       scales={'color': col}, axes=[ax_c],\n",
    "                       layout=Layout(min_width='800px', min_height='600px'))           # Axis and scale for color data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "deb_output = Label()\n",
    "def selected_index_changed(change):\n",
    "    deb_output.value = str(change.new)\n",
    "        \n",
    "market_map.observe(selected_index_changed, 'selected')\n",
    "VBox([deb_output, market_map])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Attribute to show the names of the groups, in this case the continents\n",
    "market_map.show_groups = True"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Setting the selected countries\n",
    "market_map.show_groups = False\n",
    "market_map.selected = ['PAN', 'FRA', 'PHL']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# changing selected stroke and hovered stroke variable\n",
    "market_map.selected_stroke = 'yellow'\n",
    "market_map.hovered_stroke = 'violet'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Setting the color based on data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Adding data for color and making color axis visible\n",
    "market_map.colors=['#ccc']\n",
    "market_map.color = data['GDP']\n",
    "ax_c.visible = True"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Adding a widget as tooltip"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Creating the figure to be displayed as the tooltip\n",
    "sc_x = DateScale()\n",
    "sc_y = LinearScale()\n",
    "\n",
    "ax_x = Axis(scale=sc_x, grid_lines='dashed', label='Date')\n",
    "ax_y = Axis(scale=sc_y, orientation='vertical', grid_lines='dashed',\n",
    "            label='GDP', label_location='end', label_offset='-1em')\n",
    "\n",
    "line = Lines(x= gdp_data.index.values, y=[], scales={'x': sc_x, 'y': sc_y}, colors=['orange'])\n",
    "fig_tooltip = Figure(marks=[line], axes=[ax_x, ax_y])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "market_map = MarketMap(names=country_codes, groups=continents,\n",
    "                       cols=25, row_groups=3,\n",
    "                       color=data['GDP'], scales={'color': col}, axes=[ax_c],\n",
    "                       ref_data=data, tooltip_widget=fig_tooltip,\n",
    "                       freeze_tooltip_location=True,\n",
    "                       colors=['#ccc'],\n",
    "                       layout=Layout(min_width='900px', min_height='600px'))\n",
    "\n",
    "# Update the tooltip chart\n",
    "hovered_symbol = ''\n",
    "def hover_handler(self, content):\n",
    "    global hovered_symbol\n",
    "    symbol = content.get('data', '')\n",
    "    \n",
    "    if(symbol != hovered_symbol):\n",
    "        hovered_symbol = symbol\n",
    "        if(gdp_data.get(hovered_symbol) is not None):\n",
    "            line.y = gdp_data[hovered_symbol].values\n",
    "            fig_tooltip.title = content.get('ref_data', {}).get('Name', '')\n",
    "\n",
    "# Custom msg sent when a particular cell is hovered on\n",
    "market_map.on_hover(hover_handler)\n",
    "market_map"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This notebook uses data derived from the World Bank dataset.\n",
    "- The World Bank: GDP per capita (current US$)\n",
    "- The World Bank: Country Codes \n",
    "\n",
    "See the LICENSE file for more information."
   ]
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
